<template>
  <div>
    <div class="showp">
      <div v-for="(item, i) of showdata" :key="i" class="showcontent">
        <div>{{ item.title }}</div>
        <div class="fotbig">{{ item.params }}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['showdata'],
  data() {
    return {
      // showdata:[
      //     {title:"我知道",params:"100KG"}
      // ]
    }
  },
  computed: {
    rondowcolor() {
      const str = parseInt(Math.random() * 255)
      const str1 = parseInt(Math.random() * 255)
      const str2 = parseInt(Math.random() * 255)
      console.log(str, str1, str2)
      const objcolor = {
        backgroundColor: `rgb(${str},${str1},${str2})`
      }
      const objcolor1 = {
        backgroundColor: `rgb(${str},${str1},${str2})`
      }
      const objcolor2 = {
        backgroundColor: `rgb(${str},${str1},${str2})`

      }
      const a = parseFloat(Math.random() * 1)
      console.log(a)
      if (a > 0 && a < 0.5) {
        return objcolor
      } else if (a > 0.5 && a < 0.75) {
        return objcolor1
      } else {
        return objcolor2
      }
    }
  },
  methods: {

  }
}
</script>

<style lang="css" scoped>
.showp {
  height: 7rem;
  display: flex;
  padding: 0.5rem;
  margin: 1rem 0;
  font-size: 14px;
  font-weight: bold;
  flex-wrap: wrap;
  overflow: hidden;
}
.showcontent {
  width: 20%;
  border: 1px solid #000;
  margin-right: 2%;
  text-align: center;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-radius: 0.5rem;
}
.fotbig {
  font-size: 25px;
}
</style>
